<template>
    <div class="dashboard-container">
        <my-search :fields="fieldsList" :baseNumber="6" @onSearch="searchForm" @onReset="resetForm" :selectIsAddAll="false" />
        <div class="btn">

            <div class="tab">
                <div class="tab-item" :class="[item.tabIndex == tabIndex ? 'active' : '']" v-for="(item, key) in tabList" :key="key" @click="tabhandle(item.tabIndex)">{{ item.name }}</div>

            </div>
        </div>
        <div class="table-list">

            <el-table :data="tableDatas" v-if="tabIndex == 0" v-loading="loading" style="width: 100%" border size="mini" :height="$store.state.app.windowHeight - 230">
                <el-table-column type="index" :index="indexMethod" width="55" align="center"></el-table-column>
                <el-table-column v-for="(item,key) in tableColumns" :key="key" :label="item.label" :prop="item.prop" :min-width="item.minWidth" :align="item.align"></el-table-column>
            </el-table>
            <div v-if="tabIndex === 1" v-loading="loading">
                <Xszst :rowData="xszstdata" :charData='xszstdata.charData' />
            </div>
            <div v-if="tabIndex === 2" v-loading="loading">
                <Khjyzb :rowData="khjyzbdata" />
            </div>
            <div v-if="tabIndex === 3" v-loading="loading">
                <Xxqyrlt :rowData="xxqyrltdata" />
            </div>
            <div v-if="tabIndex === 4" v-loading="loading">
                <Ghxsfx :rowData="ghxsfxdata" />
            </div>
            <div v-if="tabIndex === 5" v-loading="loading">
                <Khgxltp :rowData="khgxltpdata" />
            </div>
            <div v-if="tabIndex === 6" v-loading="loading">
                <Khjmd :rowData="khJmcddata" />
            </div>
            <div v-if="tabIndex === 7" v-loading="loading">
                <Cgxsljfx :cgsl="cgslData" :rowData="cgslTableData" :pageNo='pageNum' :pageSize="pageSize" :total="total" @changepageNum="changepageNo" @changePageSi="changePageSize" />
            </div>
            <div v-if="tabIndex === 8" v-loading="loading">
                <Mlbhqs :rowData="mlbhqsdata" />
            </div>

        </div>

    </div>
</template>

<script>
import {
    queryTop20Gys, qyjyqkfxCgXsZst, queryTop10Gys, qyjyqkfxGhXsRlt, qyjyqkfxGhXsFxt,
    qyjyqkfxHlgxtpTop10, qyjyqkfxGysKhJmcd, qyjyqkfxMlbhqs, qyjyqkfxCgXsLjfxCgsl, qyjyqkfxCgXsLjfx
} from '@/api/cxtj/qyjyqkfx'
import {
    queryDetailList
} from '@/api/cxtj/zdsygl'
import Xszst from './children/xszst'  //销售走势图
import Khjyzb from './children/khjyzb'   //客户交易占比
import Mlbhqs from './children/mlbhqs'  //毛利率变化趋势
import Xxqyrlt from './children/xxqyrlt'  //销售区域热力图
import Khgxltp from './children/khgxltp'  //客户关系链图谱
import Khjmd from './children/khjmd'  //客户关系链图谱
import Cgxsljfx from './children/cgxsljfx'  //采购销售量价分析
import Ghxsfx from './children/ghxsfx'  //供货销售分析

export default {
    name: 'Dashboard',
    components: {
        Xszst,
        Khjyzb,
        Mlbhqs,
        Xxqyrlt,
        Khgxltp,
        Khjmd,
        Cgxsljfx,
        Ghxsfx
    },
    data() {
        return {
            loading: false,
            fieldsList: [
                {
                    label: '纳税人名称:',
                    field: 'qymc',
                    type: 'autocomplete',
                    value: '',
                    options: []
                },
                {
                    label: '纳税人识别号:',
                    field: 'tyshxydm',
                    type: 'text',
                    value: ''
                },
                {
                    label: '供应商/客户:',
                    field: 'flag',
                    type: 'select', // select
                    value: '1',
                    options: [
                        {
                            value: '1',
                            label: '供应商'
                        },
                        {
                            value: '2',
                            label: '客户'
                        },
                    ]
                },
                {
                    label: '年月',
                    field: 'date',
                    type: 'monthrange', // daterange
                    value: [],
                    format: 'yyyy-MM',
                    options: [
                        {
                            field: 'kssj',
                            value: ''
                        },
                        {
                            field: 'jssj',
                            value: ''
                        }
                    ],
                    change: value => {
                        // this.changxm(value);
                    }
                },


            ],
            tabIndex: 0,
            tabList: [
                {
                    name: 'top20供应商/客户交易情况',
                    tabIndex: 0
                },
                {
                    name: '采购/销售走势图',
                    tabIndex: 1
                }

                ,
                {
                    name: 'Top10供货商供货/客户交易比例',
                    tabIndex: 2
                }

                ,
                {
                    name: '供货/销售区域热力图',
                    tabIndex: 3
                },
                {
                    name: '供货/销售分析图',
                    tabIndex: 4
                }
                ,
                {
                    name: '客户链关系图谱top10',
                    tabIndex: 5
                }
                ,
                {
                    name: '供应商/客户紧密程度',
                    tabIndex: 6
                }
                ,
                {
                    name: '采购/销售量价分析',
                    tabIndex: 7
                },
                {
                    name: '毛利变化趋势',
                    tabIndex: 8
                }
            ],
            //右侧表格开始
            tableColumns: [
                {
                    label: '客户名称',
                    prop: 'qymc',
                    align: 'center',
                    halign: 'center',
                    minWidth: 275,

                },
                {
                    label: '交易金额（万元）',
                    prop: 'jyje',
                    align: 'center',
                    minWidth: 120,
                    /*render: (h, params) => {
                        return <dict-tag options={this.dict.type.jtxx_qyxydj} value={params.row.nsrxydj} />;
                    }*/
                },
                {
                    label: '采购总金额（万元）',
                    prop: 'cgzje',
                    align: 'center',
                    minWidth: 180,
                    /*render: (h, params) => {
                        return <dict-tag options={this.dict.type.jtxx_nsrzz} value={params.row.nsrzg} />;
                    }*/
                },

                {
                    label: '依存度',
                    prop: 'ycd',
                    align: 'center',
                    minWidth: 150,

                }




            ],
            tableDatas: [],
            khjytableColumns: [
                {
                    label: '客户名称',
                    prop: 'qymc',
                    align: 'center',
                    halign: 'center',
                    minWidth: 275,

                },
                {
                    label: '交易金额（万元）',
                    prop: 'jyje',
                    align: 'center',
                    minWidth: 120,
                    /*render: (h, params) => {
                        return <dict-tag options={this.dict.type.jtxx_qyxydj} value={params.row.nsrxydj} />;
                    }*/
                },
                {
                    label: '采购总金额（万元）',
                    prop: 'cgzje',
                    align: 'center',
                    minWidth: 180,
                    /*render: (h, params) => {
                        return <dict-tag options={this.dict.type.jtxx_nsrzz} value={params.row.nsrzg} />;
                    }*/
                },

                {
                    label: '依存度',
                    prop: 'ycd',
                    align: 'center',
                    minWidth: 150,

                }




            ],
            khjytableDatas: [],
            queryObj: {
                tyshxydm: '', //公司名称
                qymc: '',
                kssj: '',
                jssj: '',
                flag: '1'
            },
            total: 0,
            xszstdata: {
                charData: {
                    xAxisData: [],
                    seriesData: []
                },
                tableData: []
            },
            khjyzbdata: {
                charData: {
                    legendData: [],
                    seriesData: []
                },
                tableData: []
            },
            xxqyrltdata: [],
            ghxsfxdata: [],
            khgxltpdata: [],
            khJmcddata: {},
            mlbhqsdata: [],
            cgslData: [],
            pageNum: 1,
            pageSize: 20,
            total: 0,
            searchTxt: ''
        }
    },
    watch: {
        // 'fieldsList[0].value': function (newOption, oldOption) {
        //     console.log(newOption, oldOption)
        // }
        fieldsList: {
            handler(newOption, oldOption) {
                console.log(newOption, oldOption)
                // if (newOption[0].value != oldOption[0].value) {
                this.searchTxt = newOption[0].value
                // this.getQueryDetailList(newOption[0].value)
                // }

                // this.getQueryDetailList(newOption)
            },
            deep: true
        },
        searchTxt(newOption, oldOption) {
            console.log('1',newOption, oldOption)
            this.getQueryDetailList(newOption)
        }
    },
    mounted() {

    },
    methods: {

        searchForm(params) {
            console.log(params, '查询条件');
            this.queryObj.qymc = params.qymc || '';
            this.queryObj.tyshxydm = params.tyshxydm || '';
            this.queryObj.kssj = params.kssj || '';
            this.queryObj.jssj = params.jssj || '';
            this.queryObj.flag = params.flag || '';

            this.getTableData();
        },
        resetForm() {
            for (let key in this.queryObj) {
                if (key == 'pageNo') {
                    this.queryObj[key] = 1;
                } else if (key == 'pageSize') {
                    this.queryObj[key] = 20;
                } else if (key == 'frgsmc') {
                    this.queryObj[key] = '';
                } else {
                    this.queryObj[key] = [];
                }
            }
            this.fieldsList[2].value = "1"
            this.tableDatas = []
            this.xszstdata.charData.xAxisData = []
            this.xszstdata.charData.seriesData = []
            this.xszstdata.tableData = []

            this.khjyzbdata.charData.legendData = []
            this.khjyzbdata.charData.seriesData = []
            this.khjyzbdata.tableData = []

            this.xxqyrltdata = []
            this.ghxsfxdata = []
            this.khgxltpdata = []
            this.khJmcddata = {}
            this.cgslData = []
            this.mlbhqsdata = []
        },
        getQueryDetailList(nsrmc) {
            queryDetailList({ nsrmc: nsrmc }).then(res => {
                if (res.code == 200) {
                    this.fieldsList[0].options = res.data.records.map(item => {
                        return { value: item.NSRMC, label: item.NSRMC }
                    })
                }
                console.log( this.fieldsList[0].options)
            })
        },

        tabhandle(index) {
            this.tabIndex = index
            console.log('index', index)
        },
        getTableData() {
            if (this.queryObj.qymc == '') {
                this.$message.error('纳税人名称不能为空')
                return false
            }
            if (this.queryObj.flag == '') {
                this.$message.error('供应商/客户不能为空')
                return false
            }
            if (this.queryObj.kssj == '' && this.queryObj.jssj == '') {
                this.$message.error('年月不能为空')
                return false
            }

            this.loading = true
            queryTop20Gys(this.queryObj).then(res => {
                this.loading = false
                if (res.code == 200) {
                    console.log(res)
                    this.tableDatas = res.data
                }
            })

            this.xszstdata.charData.xAxisData = []
            this.xszstdata.charData.seriesData = []
            this.xszstdata.tableData = []
            qyjyqkfxCgXsZst(this.queryObj).then(res => {
                this.loading = false
                if (res.code == 200) {
                    this.xszstdata.tableData = res.data
                    for (let i = 0; i < res.data.length; i++) {
                        this.xszstdata.charData.xAxisData.push(res.data[i].kprq)
                        this.xszstdata.charData.seriesData.push(res.data[i].jshj)
                    }
                }
            })

            queryTop10Gys(this.queryObj).then(res => {
                this.loading = false
                this.khjyzbdata.charData.legendData = []
                this.khjyzbdata.charData.seriesData = []
                this.khjyzbdata.tableData = []
                if (res.code == 200) {
                    this.khjyzbdata.tableData = res.data
                    for (let i = 0; i < res.data.length; i++) {
                        this.khjyzbdata.charData.legendData.push(res.data[i].qymc)
                        this.khjyzbdata.charData.seriesData.push({
                            value: res.data[i].jshj,
                            name: res.data[i].qymc
                        })
                    }
                }
            })

            qyjyqkfxGhXsRlt(this.queryObj).then(res => {
                this.loading = false
                this.xxqyrltdata = []
                if (res.code == 200) {
                    this.xxqyrltdata = res.data.map(item => {
                        return { name: item.name, value: item.qysl, xsje: item.jshj }
                    })
                }
            })

            qyjyqkfxGhXsFxt(this.queryObj).then(res => {
                this.loading = false
                this.ghxsfxdata = []
                if (res.code == 200) {
                    console.log(res)
                    this.ghxsfxdata = res.data
                }
            })
            qyjyqkfxHlgxtpTop10(this.queryObj).then(res => {
                this.loading = false
                if (res.code == 200) {
                    console.log(res)
                    this.khgxltpdata = res.data
                }
            })


            qyjyqkfxGysKhJmcd(this.queryObj).then(res => {
                this.loading = false
                if (res.code == 200) {
                    console.log(res)
                    this.khJmcddata = res.data
                }
            })
            qyjyqkfxCgXsLjfxCgsl(this.queryObj).then(res => {
                this.loading = false
                if (res.code == 200) {
                    console.log(res)
                    this.cgslData = res.data
                }
            })

            qyjyqkfxMlbhqs(this.queryObj).then(res => {
                this.loading = false
                if (res.code == 200) {
                    console.log(res)
                    this.mlbhqsdata = res.data
                }
            })
            // this.tableDatas = data
            this.getList()
        },
        indexMethod(index) {
            return index + 1;
        },
        getList() {
            this.loading = true
            let parma = {
                ...this.queryObj,
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }
            qyjyqkfxCgXsLjfx(parma).then(res => {
                this.loading = false
                console.log(res)
                if (res.code == 200) {
                    this.cgslTableData = res.data.records
                    this.total = res.data.total
                }
            })
        },
        changepageNo(currPage) {
            this.pageNum = currPage;
            this.getList();
        },
        changePageSize(pageSize) {
            this.pageSize = pageSize;
            this.getList();
        },


    }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
    height: auto;
    min-height: 100%;
    background-color: #fff;
    padding: 8px;

    .btn {
        // padding: 8px 0x 0px 0;
        padding-bottom: 10px;
    }
}

.tab {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;

    .tab-item {
        line-height: 1;
        font-size: 14px;
        border-radius: 3px;
        color: rgba(0, 0, 0, 0.88);
        background: #f5f5f5;
        border: 1px solid #dcdfe6;
        border-color: #eeeeee;
        width: 19%;
        text-align: center;
        padding: 7px 0;
        transition: 0.1s;
        font-weight: 500;
        cursor: pointer;
        margin: 8px 10px 0 0;

        &:hover,
        &.active {
            background: #409eff;
            color: #fff;
            border-color: #409eff;
        }
    }
}
::v-deep .el-date-editor {
    width: 180px;
}
::v-deep .el-autocomplete-suggestion {
    width: 400px !important; 
}
</style>
